<template>
  <div class="cx-date-picker">
    <!-- 日期选择器 YYYY-MM-DD -->
    <el-date-picker
      v-if="isDate"
      v-model="internalValue"
      type="date"
      :placeholder="placeholder"
      :disabled="readonly"
      :size="size"
      format="yyyy-MM-dd"
      value-format="yyyy-MM-dd"
      style="width: 100%"
      @change="handleChange"
    />
    
    <!-- 日期时间选择器 YYYY-MM-DD HH:mm:ss -->
    <el-date-picker
      v-else-if="isDatetime"
      v-model="internalValue"
      type="datetime"
      :placeholder="placeholder"
      :disabled="readonly"
      :size="size"
      format="yyyy-MM-dd HH:mm:ss"
      value-format="yyyy-MM-dd HH:mm:ss"
      style="width: 100%"
      @change="handleChange"
    />
    
    <!-- 时间选择器 HH:mm:ss -->
    <el-time-picker
      v-else-if="isTime"
      v-model="internalValue"
      :placeholder="placeholder"
      :disabled="readonly"
      :size="size"
      format="HH:mm:ss"
      value-format="HH:mm:ss"
      style="width: 100%"
      @change="handleChange"
    />
    
    <!-- 年份选择器 YYYY -->
    <el-date-picker
      v-else-if="isYear"
      v-model="internalValue"
      type="year"
      :placeholder="placeholder"
      :disabled="readonly"
      :size="size"
      format="yyyy"
      value-format="yyyy"
      style="width: 100%"
      @change="handleChange"
    />
    
    <!-- 年月选择器 YYYY-MM -->
    <el-date-picker
      v-else-if="isYearMonth"
      v-model="internalValue"
      type="month"
      :placeholder="placeholder"
      :disabled="readonly"
      :size="size"
      format="yyyy-MM"
      value-format="yyyy-MM"
      style="width: 100%"
      @change="handleChange"
    />
  </div>
</template>

<script>
/**
 * 组件名称: DatePicker (Element UI 版本)
 * 功能说明: 日期时间选择器组件
 * 研发时间: 2025/11/17
 * 研发人员: AI Assistant
 */

export default {
  name: 'DatePicker',
  
  props: {
    fld: {
      type: Object,
      required: true
    },
    placeholder: {
      type: String,
      default: '请选择日期'
    },
    readonly: {
      type: Boolean,
      default: false
    },
    size: {
      type: String,
      default: 'default'
    }
  },
  
  data() {
    return {
      internalValue: this.fld.value || ''
    }
  },
  
  computed: {
    /**
     * 是否为日期模式 YYYY-MM-DD
     */
    isDate() {
      if (!cx || !cx.consts) return false
      return this.fld.disptype === cx.consts.DISP_DATE
    },
    
    /**
     * 是否为日期时间模式 YYYY-MM-DD HH:mm:ss
     */
    isDatetime() {
      if (!cx || !cx.consts) return false
      return this.fld.disptype === cx.consts.DISP_TIMESTAMP
    },
    
    /**
     * 是否为时间模式 HH:mm:ss
     */
    isTime() {
      if (!cx || !cx.consts) return false
      return this.fld.disptype === cx.consts.DISP_TIME
    },
    
    /**
     * 是否为年份模式 YYYY
     */
    isYear() {
      if (!cx || !cx.consts) return false
      return this.fld.disptype === cx.consts.DISP_DATEYEAR
    },
    
    /**
     * 是否为年月模式 YYYY-MM
     */
    isYearMonth() {
      if (!cx || !cx.consts) return false
      return this.fld.disptype === cx.consts.DISP_YEARMONTH
    }
  },
  
  watch: {
    'fld.value': {
      handler(newVal) {
        this.internalValue = newVal || ''
      },
      immediate: true
    }
  },
  
  methods: {
    handleChange(value) {
      // 不直接修改 prop，通过事件通知父组件
      this.$emit('change', value || '')
      this.$emit('update:value', value || '')
    }
  }
}
</script>

<style lang="scss" scoped>
.cx-date-picker {
  width: 100%;
}
</style>
